/**
 * @Title: public.ts
 * @Author  dudalei
 * @Package
 * @Date  2024/10/14 13:46
 * @description:
 */

import { Line, Polygon, Rect, Star, Text } from 'leafer-ui'
import { Ellipse } from 'leafer-editor'
import viteSvg from '@/assets/images/test/vite.svg'

/**
 * 组件类型
 */
export const NodeType = {
  Rect: 'Rect',
  Ellipse: 'Ellipse',
  Line: 'Line',
  Polygon: 'Polygon',
  Star: 'Star',
  Image: 'Image',
  Text: 'Text',
}
export type NodeTypes = keyof typeof NodeType

/**
 * 组件类型名字
 */
export const NodeTypeName = {
  Rect: '矩形',
  Ellipse: '椭圆',
  Line: '线',
  Polygon: '多边形',
  Star: '星形',
  Image: '图片',
  Text: '文字',
}

export const getFrom = () => {}

type MyFunc = ({ x, y }: { x: number; y: number }) => any
type CreateNode = {
  [key in NodeTypes]?: MyFunc
}

const baseColor = 'rgb(50,205,121)'

/**
 * 创建节点
 */
export const createNode: CreateNode = {
  Rect: ({ x, y }: { x: number; y: number }) => {
    return new Rect({
      x,
      y,
      width: 100,
      height: 100,
      fill: baseColor,
      editable: true,
      around: 'center',
    })
  },
  Text: ({ x, y }: { x: number; y: number }) => {
    return new Text({
      x,
      y,
      // fill: baseColor,
      fill: baseColor,
      fontSize: 20,
      fontFamily: 'Inter, system-ui, Avenir, Helvetica, Arial, sans-serif',
      text: '文字内容',
      editable: true,
      around: 'center',
    })
  },
  Polygon: ({ x, y }: { x: number; y: number }) => {
    return new Polygon({
      x,
      y,
      sides: 5,
      fill: baseColor,
      editable: true,
      around: 'center',
    })
  },
  Ellipse: ({ x, y }: { x: number; y: number }) => {
    return new Ellipse({
      x,
      y,
      width: 100,
      height: 100,
      fill: baseColor,
      editable: true,
      around: 'center',
    })
  },
  Line: ({ x, y }: { x: number; y: number }) => {
    return new Line({
      x,
      y,
      width: 100,
      strokeWidth: 5,
      stroke: baseColor,
      editable: true,
      around: 'center',
    })
  },
  Star: ({ x, y }: { x: number; y: number }) => {
    return new Star({
      x,
      y,
      width: 100,
      height: 100,
      corners: 5,
      fill: baseColor,
      editable: true,
      around: 'center',
    })
  },
  Image: ({ x, y }: { x: number; y: number }) => {
    // 使用填充图案可以实现更多的功能
    return new Rect({
      x,
      y,
      width: 100,
      height: 100,
      zIndex: 100,
      editable: true,
      around: 'center',
      fill: {
        type: 'image',
        url: viteSvg,
        mode: 'fit',
      },
      hoverStyle: {
        shadow: {
          x: 0,
          y: 0,
          blur: 20,
          color: '#646cffaa',
        },
      },
    })
    /* return new Image({
      x,
      y,
      url: leaferSvg,
      editable: true
    })*/
  },
}
